BODY {
    font-family: 'Cuprum', sans-serif;
    /* Image Source: https://www.flickr.com/photos/visualtheology */
}

H1 {
    font-size: 4em;
    font-weight: bolder;
    text-shadow: .1em .1em .1em rgba(50, 50, 50, 1);
    text-align: center;
    color: lightgray;
}

H2 {
    font-size: 1.5em;
    line-height: 2.5em;
    clear: both;
}

H3 {
    font-size: 1.25em;
    font-weight: bold;
}

#Background {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    max-height: 750px;
    background-image: url( '\\Enigma/images/EnigmaMachine.jpg' );
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#Container {
    position: absolute;
    left: 0%;
    width: 100%;
    height: 100%;
}

.ContainerTitle {
    height: 100px;
    vertical-align: middle;
}

.ContainerBody {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5%;
    min-height: 800px;
    background-color: rgba(100, 100, 100, 0.9);
}

.Lampboard, .Keyboard {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: .1em;
    padding: .5em;
    border: thin solid black;
    float: left;
}

    .Lampboard:hover, .Keyboard:hover {
        background-color: yellow;
    }

.Rotors, .Plugboard {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: .1em;
    padding: .5em;
    border: thin solid black;
    float: left;
}

.Rotor {
    width: 5em;
}

.RotorSelect {
    width: 6em;
}

.PlugboardSelect {
    width: 3em;
}

.MessageDiv {
    width: 45%;
    float: left;
    margin: 0% 1%;
}

.Message {
    height: 10em;
    width: 100%;
}